<template>
  <div class="box">
    <div class="top">
      <h1>热门话题</h1>
      <p><img src="https://img.alicdn.com/imgextra/i3/3390270589/O1CN01Gb5Gt11GDnzyC0GWz_!!3390270589.jpg">查看榜单></p>
    </div>
    <div class="center">
      <ul>
        <li>#大学不谈恋爱意味着什么<span>415</span></li>
        <li>#笑的我的头都掉了<img src="https://img.alicdn.com/imgextra/i2/3390270589/O1CN01fQbv6A1GDo01Ynjlj_!!3390270589.jpg"><span>2万</span></li>
        <li>#废话文学大赛<img src="https://img.alicdn.com/imgextra/i3/3390270589/O1CN01oviEcf1GDnzyBxaFt_!!3390270589.jpg"><span>5.1万</span></li>
      </ul>
      <ul>
        <li>#一张图怼的我一整个大无语<span>415</span></li>
        <li>#意见倾心太甜了<span>2万</span></li>
        <li>#男女生不同的心动方式<span>5.1万</span></li>
      </ul>
      <ul>
        <li>#大学不谈恋爱意味着什么<span>415</span></li>
        <li>#笑的我的头都掉了<span>2万</span></li>
        <li>#废话文学大赛<span>5.1万</span></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Hottopic",
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 2rem;
  box-sizing: border-box;
  padding: 0.14rem;
}
.box .top {
  width: 100%;
  height: 0.75rem;
  line-height: 0.75rem;
}
.box h1 {
  font-size: 0.18rem;
  color: black;
  float: left;
}
.box .top p {
  font-size: 0.18rem;
  color: #a8a8a8;
  float: right;
}
.box .center {
  height: 1.1rem;
  display: flex;
  overflow: scroll;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.box .center ul {
  width: 3.3rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-right: .3rem;
}
.box .center::-webkit-scrollbar {
  display: none;
}
.box .center ul li{
  width: 100%;
  height: .4rem;
  line-height: .4rem;
}
.box .center span{
  float:right
}
</style>
